import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Button } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import moment from 'moment'

import { mGetDate } from '../../utils/util';
import { getHistoryInfo } from '../../store/actions/practice'
import './style.less';

/*
  最近一个月
*/

@connect((state) => ({
  history: state.system.practice.history,
  login: state.system.login
}))
class Lately extends Component {
  defaultProps = {
    time: moment().format('YYYY-MM-DD')
  }
  constructor(props) {
    super(props);
  }
  navTo = (e) => {
    const { dispatch } = this.props
    if (
      e.currentTarget &&
      e.currentTarget.dataset &&
      e.currentTarget.dataset.id
    ) {
      dispatch(getHistoryInfo(e.currentTarget.dataset.id))
    }
    Taro.navigateTo({
      url: '../../pages/historyInfo/index'
    })
  }
  changeTime = (type) => {
    const { time, onSetTime } = this.props;
    if (type === '-') {
      onSetTime(moment(time).subtract(1, 'months'));
    } else if (type === '+') {
      onSetTime(moment(time).add(1, 'months'));
    }
  }
  render() {
    const { time, login } = this.props;
    if (!login.session) {
      return (
        <View className='needLogin' >
          <Button>
            微信登录
          </Button>
        </View>
      )
    }
    if (!time) {
      return null
    }
    let year = moment(time).format('YYYY');
    let month = moment(time).format('MM');

    const { history } = this.props;
    let thisMonth = [];
    let monthInfo = {};
    let length = mGetDate(year, month);

    if (history.result && history.result.results) {
      monthInfo = history.result.results.reduce((res, item) => {
        let da = moment(item.date)
        if (da.format('YYYY') === year && da.format('MM') === month) {
          item.label = new Date(item.date).getDate();
          res[item.date] = item;
        }
        return res;
      }, {});
    }
    if (Object.keys(monthInfo).length === 0) {
      length = 13
    }
    for (let i = length; i > 0; i--) {
      let da = new Date(year, month - 1, i);
      let key = moment(da).format('YYYY-MM-DD');
      if (monthInfo[key]) {
        thisMonth.push({
          type: 'text',
          value: monthInfo[key].label,
          id: monthInfo[key].id
        })
      } else {
        thisMonth.push({
          type: 'point',
          value: i,
        })
      }
    }
    let wrapWidth = thisMonth.reduce((res, item) => {
      if (item.type === 'date') {
        res += 80 + 15;
      } else if (item.type === 'point') {
        res += 25 + 15;
      }
      return res;
    }, 0);
    return (
      <ScrollView
        className='lately'
        scrollX
        scrollTop='0'
        scrollWithAnimation
      >
        <View style={{ width: `${(wrapWidth + 200) - 30}rpx`}}>
          <View className='item' style={{ width: '85rpx' }} >
            <View className='text' onClick={this.changeTime.bind(this, '-')} >
              <View className='iconfont icon-left' ></View>
            </View>
          </View>
          {
            thisMonth.map((item, i) => {
              let className = 'item'
              if (item.type === 'point') {
                className = 'spot'
              }
              return (
                <View className={className} key={i}  >
                  {
                    item.type === 'point' ? (
                      <View className='text' >
                        <View className='point' ></View>
                      </View>
                    ) : (
                      <View className='text' onClick={this.navTo} data-id={item.id} >{item.value}</View>
                    )
                  }
                </View>
              )
            })
          }
          {
            (month !== moment().format('MM') && year !== moment().format('YYYY')) && (
              <View className='item' style={{ width: '85rpx' }} >
                <View className='text' onClick={this.changeTime.bind(this, '+')} >
                  <View className='iconfont icon-right' ></View>
                </View>
              </View>
            )
          }
        </View>
      </ScrollView>
    )
  }
}

export default Lately;
